<#assign ctx = request.contextPath />
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="${ctx}/jquery/jquery-1.11.1-min.js"></script>
    <script src="${ctx}/layui/layui.js"></script>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css">
    <script>
        $(function () {
            $("#btn-submit").click(function () {
                $.ajax({
                    url: "${ctx}" + "/api/v1/crawl/parse",
                    data: $(".layui-form").serialize(),
                    type: "get",
                    dataType: "json",
                    success: function (response) {
                        alert(response.code);
                    }
                })
            })
        })
        layui.use(function () {
            var layer = layui.layer;
            var form = layui.form;
            var util = layui.util;
            var element = layui.element;
            var $ = layui.$;
            // 事件
            util.on('lay-on', {
                'test-tips-photos': function () {
                    layer.photos({
                        photos: {
                            "title": "Photos Demo",
                            "start": 0,
                            "data": [
                                {
                                    "alt": "使用详情",
                                    "pid": 1,
                                    "src": "${ctx}/image/1.png",
                                },
                                {
                                    "alt": "壁纸",
                                    "pid": 3,
                                    "src": "https://unpkg.com/outeres@0.1.1/demo/000.jpg",
                                },
                                {
                                    "alt": "浩瀚宇宙",
                                    "pid": 5,
                                    "src": "https://unpkg.com/outeres@0.1.1/demo/outer-space.jpg",
                                }
                            ]
                        }
                    });
                },
                'tipUri': function () {
                    layer.msg("测试中");
                },
                'pagination-test': function () {
                    var loadIndex;
                    $.ajax({
                        url: "${ctx}" + "/api/v1/crawl/test",
                        data: $(".layui-form").serialize(),
                        type: "get",
                        dataType: "json",
                        beforeSend : function (){
                            loadIndex = layer.load(1);
                        },
                        success: function (response) {
                            layer.close(loadIndex);
                            layer.msg("解析成功，分页数据：" + response.data.toString());
                        },
                        error: function () {
                            layer.close(loadIndex);
                            layer.msg("解析失败，请开启详细配置继续测试。如果仍然失败，请上传问题或联系作者探讨。");
                        }
                    })
                }
            })

            form.on('switch(config-filter)', function (data) {
                var elem = data.elem; // 获得 checkbox 原始 DOM 对象
                var checked = elem.checked; // 获得 checkbox 选中状态
                if (checked) {
                    $(".details").show();
                } else {
                    $(".details").hide();
                }
            });

            //控制是否分页显示
            form.on('radio(pagination)', function (data) {
                if (data.value == '是') {
                    $("#pagination_range").show();
                } else {
                    $("#pagination_range").hide();
                }
            });
        });

        function showTips(msg, obj) {
            layer.tips('' + msg, '#' + obj.id, {tips: [1, 'black']});
        }

        function closeTips() {
            layer.closeAll('tips');
        }
    </script>

    <style>
        .label-title {
            width: 15%
        }
        .details {
            display: none;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-col-xs6 layui-col-md12">
        <#--            <div class="grid-demo grid-demo-bg2">移动：6/12、桌面：12/12</div>
                        md12 ：范围内全长
                        修改比例 = md + 数字
        -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>小说网站解析规则</legend>
        </fieldset>
        <div class="layui-bg-gray" style="padding: 30px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">分页</div>
                        <div class="layui-card-body">
                            <form class="layui-form layui-row layui-col-space16">
                                <div class="layui-form-item">
                                    <label class="layui-form-label label-title">网站前缀</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="prefix" required lay-verify="required"
                                               placeholder="网站前缀" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">网站前缀</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label label-title"><span></span>目录页路径</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="startPageUrl" required lay-verify="required"
                                               placeholder="请输入分页完整路径" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">访问目录页，将网址完整的复制</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label label-title">返回值类型</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="resultType" value="html" title="html" checked>
                                        <input type="radio" name="resultType" value="json" title="json" disabled>
                                    </div>
                                    <div class="layui-form-mid layui-text-em">
                                        <i class="layui-icon layui-icon-tips" id="result-type-tips"
                                           style="font-size: 20px;margin-left: 10px"
                                           onmouseover="showTips('暂时只支持html格式，大多数图书网站都是返回html格式',this)"
                                           onmouseleave="closeTips()"></i>
                                    </div>
                                </div>
<#--                                <div class="layui-form-item">-->
<#--                                    <label class="layui-form-label label-title">开启详细配置</label>-->
<#--                                    <div class="layui-input-inline">-->
<#--                                        <input type="checkbox" name="configType" value="1" lay-text="开启|关闭"-->
<#--                                               lay-skin="switch" lay-filter="config-filter">-->
<#--                                    </div>-->
<#--                                </div>-->
                                <div class="layui-form-item">
                                    <label class="layui-form-label label-title">是否分页</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="isPaginate" id="pagination_true" value="是"
                                               title="是" checked lay-filter="pagination">
                                        <input type="radio" name="isPaginate" id="pagination_false" value="否"
                                               title="否" lay-filter="pagination">
                                    </div>
                                </div>

                                <div id="pagination_range" class="layui-form-item">
                                    <label class="layui-form-label label-title">目录链接范围</label>
                                    <div class="layui-col-md3">
                                        <div class="layui-input-inline" style="width: 100%!important;">
                                            <input type="pageTag" name="pageTag" lay-verify="required"
                                                   placeholder="输入标签名，例如：div" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-input-inline" style="width: 100%!important;">
                                            <select id="pageAttribute" name="pageAttribute">
                                                <option value="">请选择属性</option>
                                                <option value="id">id</option>
                                                <option value="name">name</option>
                                                <option value="class">class</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-input-inline" style="width: 100%!important;">
                                            <input type="text" name="pageAttributeValue" lay-verify="required"
                                                   placeholder="请输入属性值，例如：list" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-mid layui-text-em">
                                        <i class="layui-icon layui-icon-tips" id="pagination-link-tips"
                                           style="font-size: 20px;margin-left: 10px"
                                           onmouseover="showTips('按照规测填写包含分页链接的元素',this)"
                                           onmouseleave="closeTips()"></i>
                                    </div>
                                </div>

                                <div id="link_range" class="layui-form-item">
                                    <label class="layui-form-label label-title">章节链接范围</label>
                                    <div class="layui-col-md3">
                                        <div class="layui-input-inline" style="width: 100%!important;">
                                            <input type="text" name="chapterTag" lay-verify="required"
                                                   placeholder="输入标签名，例如：div" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-input-inline" style="width: 100%!important;">
                                            <select id="chapterAttribute" name="chapterAttribute">
                                                <option value="">请选择属性</option>
                                                <option value="id">id</option>
                                                <option value="name">name</option>
                                                <option value="class">class</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-input-inline" style="width: 100%!important;">
                                            <input type="text" name="chapterAttributeValue" lay-verify="required"
                                                   placeholder="请输入属性值，例如：list" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-mid layui-text-em">
                                        <i class="layui-icon layui-icon-tips" id="chapter-link-tips"
                                           style="font-size: 20px;margin-left: 10px"
                                           onmouseover="showTips('按照规测填写包含章节链接的元素',this)"
                                           onmouseleave="closeTips()"></i>
                                    </div>
                                </div>

                                <div id="content_range" class="layui-form-item">
                                    <label class="layui-form-label label-title">正文内容范围</label>
                                    <div class="layui-col-md3">
                                        <div class="layui-input-inline" style="width: 100%!important;">
                                            <input type="text" name="contentTag" lay-verify="required"
                                                   placeholder="输入标签名，例如：div" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-input-inline" style="width: 100%!important;">
                                            <select id="contentAttribute" name="contentAttribute">
                                                <option value="">请选择属性</option>
                                                <option value="id">id</option>
                                                <option value="name">name</option>
                                                <option value="class">class</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-col-md3">
                                        <div class="layui-input-inline" style="width: 100%!important;">
                                            <input type="text" name="contentAttributeValue" lay-verify="required"
                                                   placeholder="请输入属性值，例如：list" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-mid layui-text-em">
                                        <i class="layui-icon layui-icon-tips" id="content-link-tips"
                                           style="font-size: 20px;margin-left: 10px"
                                           onmouseover="showTips('按照规测填写包含文章正文的元素',this)"
                                           onmouseleave="closeTips()"></i>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label label-title">正文分页类型</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="contentPaginateType" id="pagination_true" value="1"
                                               title="指定分页url" checked lay-filter="pagination">
                                        <input type="radio" name="contentPaginateType" id="pagination_false" value="2"
                                               title="指定分页标签" lay-filter="pagination" disabled>
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label label-title">正文分页规则</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="loopSymbol" lay-verify="required"
                                               placeholder="" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label label-title">输出路径</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="outputPath" lay-verify="required"
                                               placeholder="例如：F:\directory" autocomplete="off"
                                               class="layui-input">
                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button id="btn-test" class="layui-btn" type="button" lay-filter="formDemo"
                                                lay-on="pagination-test">测试
                                        </button>
                                        <button id="btn-submit" type="button"
                                                class="layui-btn layui-btn-primary layui-border-green">运行
                                        </button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>